.pill {
  display: inline-block;
  background: transparent;
  color: $gray-600;
  border: 2px solid $gray-600;
  border-radius: 124px;
  margin: 2px 2px 5px 2px;
  outline: none;
  padding: 3px 12px;
  white-space: nowrap;
  &.active {
    background: $orange;
    color: $white;
    border: 2px solid transparent;
  }
  &.secondary {
    &.active {
      background: $blue;
      color: $white;
    }
  }
  &:visited,
  &:hover,
  &:visited:hover {
    color: $gray-600;
    &.active {
      color: $white;
    }
  }
  button {
    background: transparent;
    border: none;
    color: inherit;
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    color: rgba(141, 141, 141, 0.5);
    border-color: rgba(141, 141, 141, 0.5);
  }
}
